<template>
  <div class="person">
    姓：<input type="text" v-model="firstName" /><br />
    名：<input type="text" v-model="lastName" /><br />
    <button @click="changeFullName">将全名改为li-si</button>
    全名：<span>{{ fullName }}</span
    ><br />
  </div>
</template>

<script setup name="Person">
import { computed, ref } from "vue";

let firstName = ref("zhang");
let lastName = ref("san");

//computed 特点：它会随着数据变化而变化，在数据发生变化后会保存数据变化的结果，下次调用时如果数据不变，computed函数只会变化一次
//computed 具有缓存属性，这里我们就要提到方法了，方法是没有缓存的

//这么定义的一个 fullName 是一个计算属性，且是只读的，无法修改
/*
let fullName = computed(() => {
  console.log(2);
  return (
    firstName.value.slice(0, 1).toUpperCase() +
    firstName.value.slice(1) +
    "-" +
    lastName.value
  );
});
*/

//这么定义的 fullName 是一个计算属性，且可读可写
//在 computed 方法中,get() 和 set()方法是要同时使用的
let fullName = computed({
  get() {
    return (
      firstName.value.slice(0, 1).toUpperCase() +
      firstName.value.slice(1) +
      "-" +
      lastName.value
    );
  },
  //set() 必有参数
  set(val) {
    const [str1, str2] = val.split("-");
    /*console.log("set", val);
    //val 返回的是最新修改的值
    */
    firstName.value = str1;
    lastName.value = str2;
  },
});

function fullName2() {
  console.log(1);
  return (
    firstName.value.slice(0, 1).toUpperCase() +
    firstName.value.slice(1) +
    "-" +
    lastName.value
  );
}

function changeFullName() {
  fullName.value = "li-si";
}
</script>

<style scoped>
.person {
  background-color: #c2e0f6;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button {
  margin: 0 5px;
}
</style>